<template>
  <view class="interview-page">
    <!-- 顶部自定义Header -->
    <!-- <uv-navbar title="职场面试" @leftClick="leftClick" leftIconColor="#fff" titleStyle="color: #fff"></uv-navbar> -->
    <!-- 顶部横幅 -->
    <view class="banner">
      <view class="back-icon">
        <i
          class="iconfont iconfont-xiangzuo"
          style="font-size: 22px; color: #333"
        ></i>
      </view>
      <image
        class="banner-img"
        src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
        mode="aspectFill"
      />
      <view class="banner-overlay">
        <text class="banner-title">职场面试</text>
        <text class="banner-slogan">准备充分应对，展现专业自信</text>
      </view>
    </view>
    <!-- 全局筛选条件 -->
    <view class="filter-card">
      <view class="filter-row">
        <view class="filter-col">
          <view class="filter-label">行业选择</view>
          <uni-data-select
            v-model="industry"
            label="行业选择"
            :localdata="industryOptions"
            @change="selectIndustry"
            placeholder="请选择行业"
          ></uni-data-select>
        </view>
        <view class="filter-col">
          <view class="filter-label">岗位选择</view>
          <uni-data-select
            v-model="position"
            label="岗位选择"
            :localdata="positionOptions"
            @change="selectPosition"
            :placeholder="industry ? '请选择岗位' : '请先选择行业'"
            :disabled="!industry"
          ></uni-data-select>
        </view>
      </view>
    </view>
    <!-- 模拟面试区域 -->
    <view class="interview-card">
      <view class="interview-title">
        <uv-icon name="play-circle" color="#4ECDC4" size="36" />
        <text class="title-text">模拟面试</text>
        <text class="title-desc">自定义面试设置，开始能力提升</text>
      </view>

      <view class="form-group">
        <view class="form-label">目标公司</view>
        <input
          class="form-input"
          placeholder="请输入目标公司名称或简称"
          v-model="company"
        />
      </view>

      <view class="form-group">
        <view class="form-label"
          >目标岗位说明
          <uv-upload
            :fileList="fileList1"
            name="1"
            multiple
            :maxCount="10"
            @afterRead="afterRead"
            @delete="deletePic"
            style="display: inline-block;margin-left: 20rpx;"
          >
            <uv-button
              type="primary"
              class="resume-btn"
              size="small"
            >
              上传岗位截图</uv-button
            >
          </uv-upload>
          <text style="font-size: 18rpx;color: #999;margin-left: 20rpx;">
            (截图内容会回显在岗位描述中)
          </text>
        </view>
        
        <textarea
          class="form-textarea"
          placeholder="请输入岗位描述"
          v-model="jobDesc"
        />
      </view>

      <view class="form-group">
        <view class="form-label">面试官性格</view>
        <view class="pill-group">
          <view
            v-for="item in characterList"
            :key="item.value"
            :class="['pill', character === item.value ? 'active' : '']"
            @click="character = item.value"
            >{{ item.label }}</view
          >
        </view>
      </view>

      <view class="form-group">
        <view class="form-label">问题偏好</view>
        <view class="pill-group">
          <view
            v-for="item in questionList"
            :key="item.value"
            :class="['pill', questionType === item.value ? 'active' : '']"
            @click="questionType = item.value"
            >{{ item.label }}</view
          >
        </view>
      </view>


      <view class="form-group">
        <view class="form-label">选择简历</view>
        <uni-data-select
          v-model="resume"
          :localdata="resumeOptions"
          @change="selectResume"
          style="margin-bottom: 10rpx"
          placeholder="请选择简历"
        ></uni-data-select>
        <uv-button type="primary" class="resume-btn" @click="openResumePopup">
          <uv-icon name="file-text" color="#fff" size="24" />
          管理简历</uv-button
        >
        <view class="resume-tip">
          <uv-icon
            name="info-circle"
            color="#888"
            size="18"
            style="margin-right: 6rpx"
          />
          <text>面试官会根据您选择的简历提出更相关的问题</text>
        </view>
      </view>

      <!-- 底部按钮组 -->
      <view class="mode-btn-group">
        <uv-button type="primary" class="mode-btn" @click="goToPracticeMode"
          >进入面试</uv-button
        >
        <!-- <uv-button type="error" class="mode-btn" @click="goToFormalMode"
          >正式模式</uv-button
        > -->
      </view>
    </view>
    <!-- 选择简历区域 -->
    <uv-popup ref="resumePopup" mode="center" round="16">
      <view class="resume-popup-container">
        <!-- 弹窗头部 -->
        <view class="resume-popup-header">
          <text class="resume-popup-title">我的简历</text>
          <uv-icon
            name="close"
            color="#999"
            size="24"
            @click="closeResumePopup"
          />
        </view>

        <!-- 上传区域 -->
        <view class="resume-upload-section">
          <uv-upload
            :fileList="resumeFileList"
            name="resume"
            multiple
            :maxCount="5"
            @afterRead="afterResumeRead"
            @delete="deleteResume"
            accept=".pdf,.doc,.docx"
          >
            <uv-button type="primary" class="upload-btn">
              <uv-icon name="folder" color="#fff" size="24" />
              上传新简历
            </uv-button>
       
          
          </uv-upload>
          <text class="upload-info">支持PDF、Word格式, 单个文件不超过10MB</text>
        </view>

        <uv-line />

        <!-- 简历列表 -->
        <scroll-view scroll-y class="resume-list">
          <view class="resume-item" v-for="item in resumeList" :key="item.id">
            <view class="resume-details">
              <text class="resume-name">{{ item.name }}</text>
              <text class="resume-meta"
                >{{ item.format }}格式 &nbsp; 上传于:
                {{ item.uploadDate }}</text
              >
            </view>
            <view class="resume-actions">
              <view class="action-icon-wrapper" @click="previewResume(item)">
                <uv-icon name="eye" color="#666" size="18" />
              </view>
              <view class="action-icon-wrapper" @click="deleteResumeItem(item)">
                <uv-icon name="trash" color="#fa3534" size="18" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uv-popup>
    
    <!-- 文件预览弹窗 -->
    <uv-popup ref="previewPopup" mode="center" round="16" width="90%" height="80%">
      <view class="preview-popup-container">
        <!-- 弹窗头部 -->
        <view class="preview-popup-header">
          <text class="preview-popup-title">{{ previewFileName }}</text>
          <uv-icon
            name="close"
            color="#999"
            size="24"
            @click="$refs.previewPopup.close()"
          />
        </view>
        
        <!-- 内容区域 -->
        <view class="preview-content-wrapper">
         
          <!-- 简历分析结果 -->
          <view v-if="resumeAnalysisData" class="resume-analysis-section">
            <view class="analysis-header">
              <uv-icon name="file-text" color="#4ECDC4" size="24" />
              <text class="analysis-title">简历分析结果</text>
            </view>
            
            <scroll-view scroll-y class="analysis-scroll">
              <!-- 个人信息 -->
              <view v-if="resumeAnalysisData.personalInfo" class="analysis-section">
                <text class="section-title">个人信息</text>
                <view class="info-grid">
                  <view class="info-item" v-if="resumeAnalysisData.personalInfo.name">
                    <text class="info-label">姓名:</text>
                    <text class="info-value">{{ resumeAnalysisData.personalInfo.name }}</text>
                  </view>
                  <view class="info-item" v-if="resumeAnalysisData.personalInfo.gender">
                    <text class="info-label">性别:</text>
                    <text class="info-value">{{ resumeAnalysisData.personalInfo.gender }}</text>
                  </view>
                  <view class="info-item" v-if="resumeAnalysisData.personalInfo.age">
                    <text class="info-label">年龄:</text>
                    <text class="info-value">{{ resumeAnalysisData.personalInfo.age }}岁</text>
                  </view>
                  <view class="info-item" v-if="resumeAnalysisData.personalInfo.phone">
                    <text class="info-label">电话:</text>
                    <text class="info-value">{{ resumeAnalysisData.personalInfo.phone }}</text>
                  </view>
                  <view class="info-item" v-if="resumeAnalysisData.personalInfo.email">
                    <text class="info-label">邮箱:</text>
                    <text class="info-value">{{ resumeAnalysisData.personalInfo.email }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 工作经验 -->
              <view v-if="resumeAnalysisData.workExperience && resumeAnalysisData.workExperience.length > 0" class="analysis-section">
                <text class="section-title">工作经验</text>
                <view class="experience-list">
                  <view class="experience-item" v-for="(work, index) in resumeAnalysisData.workExperience" :key="index">
                    <view class="experience-header">
                      <text class="company-name">{{ work.company }}</text>
                      <text class="work-time">{{ work.time }}</text>
                    </view>
                    <text class="position-name">{{ work.position }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 项目经验 -->
              <view v-if="resumeAnalysisData.projectExperience && resumeAnalysisData.projectExperience.length > 0" class="analysis-section">
                <text class="section-title">项目经验</text>
                <view class="project-list">
                  <view class="project-item" v-for="(project, index) in resumeAnalysisData.projectExperience" :key="index">
                    <view class="project-header">
                      <text class="project-name">{{ project.projectName }}</text>
                      <text class="project-time">{{ project.time }}</text>
                    </view>
                    <text class="project-description">{{ project.description }}</text>
                    <view v-if="project.responsibilities && project.responsibilities.length > 0" class="responsibilities">
                      <text class="responsibilities-title">主要职责:</text>
                      <view class="responsibility-item" v-for="(resp, rIndex) in project.responsibilities" :key="rIndex">
                        <text class="responsibility-text">• {{ resp }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 教育经验 -->
              <view v-if="resumeAnalysisData.educationExperience && resumeAnalysisData.educationExperience.length > 0" class="analysis-section">
                <text class="section-title">教育经验</text>
                <view class="education-list">
                  <view class="education-item" v-for="(edu, index) in resumeAnalysisData.educationExperience" :key="index">
                    <view class="education-header">
                      <text class="school-name">{{ edu.school }}</text>
                      <text class="edu-time">{{ edu.time }}</text>
                    </view>
                    <text class="degree-info">{{ edu.degree }} - {{ edu.major }}</text>
                  </view>
                </view>
              </view>
              
              <!-- 技术栈 -->
              <view v-if="resumeAnalysisData.technologyStack && resumeAnalysisData.technologyStack.length > 0" class="analysis-section">
                <text class="section-title">技术栈</text>
                <view class="tech-tags">
                  <view class="tech-tag" v-for="(tech, index) in resumeAnalysisData.technologyStack" :key="index">
                    {{ tech }}
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </uv-popup>
    
    <uv-tabbar
      :value="tabValue"
      @change="tabChange"
      activeColor="#4ECDC4"
      style="width: 100%"
    >
      <uv-tabbar-item text="模拟面试" icon="play-circle"></uv-tabbar-item>
      <uv-tabbar-item text="演练面试" icon="reload"></uv-tabbar-item>
      <uv-tabbar-item text="我的信息" icon="account"></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script>
//import PageHeader from '@/components/PageHeader.vue'
import Tesseract from 'tesseract.js'
import { postQuery,industryQuery ,phoneLogin,resumeUpload,resumeQuery,
  resumeDelete,interviewStart,resumeAnalysis} from '@/api/interview'
export default {
  // components: { PageHeader },
  data() {
    return {
      tabValue: 0,
      industry: '',
      position: '',
      company: '银行',
      jobDesc: '岗位描述1.系统开发:参与公司AI产品后端系统的设计与开发负责功能模块的实现和优化。编写高质量、可维护的代码，确保系统的稳定性、可扩展性和高性能。2.技术攻关:解决开发过程中的技术难题，参与系统性能优化和架构改进。协助团队攻克高并发、低延时等技术挑战。3.协作与支持:与前端开发、测试、产品经理等团队成员紧密合作，确保项目按时交付。参与技术文档的编写和维护，确保代码和设计的可读性。4.新技术探索:关注行业最新技术动态，探索并引入适合公司业务的新技术和工具。',
      character: '友善型', // 默认选中第一个
      questionType: '技术型', // 默认选中第一个
      lang: 'zh',
      resume: '',
      industryOptions: [
        // 数据将从接口动态加载
      ],
      positionOptions: [
        // 数据将从接口动态加载
      ],
      characterList: [
        { label: '友善型', value: '友善型' },
        { label: '中立型', value: '中立型' },
        { label: '严厉型', value: '严厉型' }
      ],
      questionList: [
        { label: '技术型', value: '技术型' },
        { label: '行为型', value: '行为型' },
        { label: '混合型', value: '混合型' }
      ],
      resumeOptions: [
        { text: '我的简历A', value: 'a' },
        { text: '我的简历B', value: 'b' },
        { text: '我的简历C', value: 'c' }
      ],

      resumeList: [
        {
          id: 1,
          name: '研发工程师简历',
          format: 'PDF',
          uploadDate: '2023-07-15'
        },
        {
          id: 2,
          name: '产品经理简历',
          format: 'Word',
          uploadDate: '2023-08-02'
        }
      ],

             fileList1: [],
       fileList2: [],
       fileList3: [],
       resumeFileList: [],
       previewFileUrl: '',
       previewFileName: '',
       resumeAnalysisData: null // 简历分析结果
    }
  },
  methods: {
    selectIndustry(val) {
      this.industry = val
      // 清空之前选择的岗位
      this.position = ''
      // 根据选择的行业获取对应的岗位数据
      this.getPositionsByIndustry(val)
      uni.$emit('uv-drop-down-close', { sign: 'industry' })
    },
    // 根据行业ID获取岗位数据
    getPositionsByIndustry(industryId) {
      if (!industryId) {
        this.positionOptions = []
        return
      }
      
      postQuery({ industryId: industryId }).then(res => {
        if (res && res.data && Array.isArray(res.data)) {
          this.positionOptions = res.data.map(item => ({
            text: item.name,
            value: item.id.toString()
          }))
          
          // 自动选中第一个岗位
          if (this.positionOptions.length > 0) {
            this.position = this.positionOptions[0].value
          }
        } else {
          this.positionOptions = []
        }
      }).catch(err => {
        console.error('获取岗位数据失败:', err)
        this.positionOptions = []
      })
    },
    selectPosition(val) {
      this.position = val
      uni.$emit('uv-drop-down-close', { sign: 'position' })
    },
    onIndustryPopupChange(e) {
    },
    onPositionPopupChange(e) {
    },
    async afterRead(event) {
      uni.showLoading({
        title: '识别中...',
        mask: true
      })
      this.fileList1 = [
        ...this.fileList1,
        {
          url: event.file[0].url
        }
      ]
      
      Tesseract.recognize(
        event.file[0].url,
        'chi_sim',
        {
          logger: (m) => {}
        }
      )
        .then(({ data: { text } }) => {
          this.jobDesc = text
          uni.hideLoading()
        })
        .catch((err) => {
          console.log('识别失败:', err)
        })
    },
    deletePic(event) {
      this.fileList1 = this.fileList1.filter(
        (file) => file.id !== event.detail.file.id
      )
    },

    openResumePopup() {
      this.$refs.resumePopup && this.$refs.resumePopup.open()
    },
    closeResumePopup() {
      this.$refs.resumePopup && this.$refs.resumePopup.close()
    },
    previewResume(item) {
      console.log('预览简历:', item)
      
      if (! item.filePath) {
        // 如果没有文件链接，显示提示
        uni.showToast({
          title: '暂无文件链接',
          icon: 'none'
        })
        return
      }
      
      // 设置文件URL并打开预览弹窗
      this.previewFileUrl = item.filePath
      this.previewFileName = item.name || '简历文件'
      this.$refs.previewPopup && this.$refs.previewPopup.open()
      
      // 发送简历分析请求
      this.analyzeResume(item.id)
    },
    
    // 分析简历
    analyzeResume(resumeId) {
      if (!resumeId) {
        console.warn('简历ID不存在，跳过分析')
        return
      }
      
      console.log('开始分析简历:', resumeId)
      
      uni.showLoading({
        title: '分析中...',
        mask: true
      })
      
      resumeAnalysis(resumeId).then(res => {
        console.log('简历分析结果:', res)
        
        // 保存分析结果到data中
        this.resumeAnalysisData = res.data || null
        
        uni.hideLoading()
        
        // 显示分析完成提示
        uni.showToast({
          title: '简历分析完成',
          icon: 'success',
          duration: 2000
        })
        
      }).catch(err => {
        console.error('简历分析失败:', err)
        
        uni.hideLoading()
        
        // 分析失败不影响预览功能，只显示提示
        uni.showToast({
          title: '简历分析失败',
          icon: 'none',
          duration: 2000
        })
      })
    },
    goToPracticeMode() {
      // 验证必填字段
      if (!this.industry) {
        uni.showToast({
          title: '请选择行业',
          icon: 'error'
        })
        return
      }
      if (!this.position) {
        uni.showToast({
          title: '请选择岗位',
          icon: 'error'
        })
        return
      }
      if (!this.company) {
        uni.showToast({
          title: '请输入目标公司',
          icon: 'error'
        })
        return
      }
      if (!this.jobDesc) {
        uni.showToast({
          title: '请输入岗位描述',
          icon: 'error'
        })
        return
      }
      
      // 构建面试参数
      const interviewParams = {
        industryId: parseInt(this.industry),
        postId: parseInt(this.position),
        resumeId: this.resume ? parseInt(this.resume) : 0,
        companyName: this.company,
        jdDesc: this.jobDesc,
        interviewerStyle: this.character,
        interviewerType: this.questionType
      }
      
      // 调用面试开始接口
      interviewStart(interviewParams).then(res => {
        uni.showToast({
          title: '面试已开始',
          icon: 'success'
        })
        // 跳转到练习模式页面
        uni.navigateTo({ url: '/pages/practiceMode?interviewId='+res.data})
      }).catch(err => {
        uni.showToast({
          title: err.message || '启动面试失败',
          icon: 'error'
        })
      })
    },
    goToFormalMode() {
      // 验证必填字段
      if (!this.industry) {
        uni.showToast({
          title: '请选择行业',
          icon: 'error'
        })
        return
      }
      if (!this.position) {
        uni.showToast({
          title: '请选择岗位',
          icon: 'error'
        })
        return
      }
      if (!this.company) {
        uni.showToast({
          title: '请输入目标公司',
          icon: 'error'
        })
        return
      }
      if (!this.jobDesc) {
        uni.showToast({
          title: '请输入岗位描述',
          icon: 'error'
        })
        return
      }
      
      // 构建面试参数
      const interviewParams = {
        industryId: parseInt(this.industry),
        postId: parseInt(this.position),
        resumeId: this.resume ? parseInt(this.resume) : 0,
        companyName: this.company,
        jdDesc: this.jobDesc,
        interviewerStyle: this.character,
        interviewerType: this.questionType
      }
      
      // 调用面试开始接口
      interviewStart(interviewParams).then(res => {
        uni.showToast({
          title: '面试已开始',
          icon: 'success'
        })
        // 跳转到正式模式页面
        uni.navigateTo({ url: '/pages/formalMode' })
      }).catch(err => {
        uni.showToast({
          title: err.message || '启动面试失败',
          icon: 'error'
        })
      })
    },
    leftClick() {
      uni.navigateBack()
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/interview' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pages/practiceHistory' })
      } else if (index === 2) {
        uni.navigateTo({ url: '/pages/profile' })
      }
    },
 
    getData(){
    
      industryQuery().then(res=>{
        if (res && res.data && Array.isArray(res.data)) {
          this.industryOptions = res.data.map(item => ({
            text: item.name,
            value: item.id.toString()
          }))
          
          // 自动选中第一个行业
          if (this.industryOptions.length > 0) {
            this.industry = this.industryOptions[0].value
            // 获取第一个行业对应的岗位数据
            this.getPositionsByIndustry(this.industry)
          }
        }
      }).catch(err => {
        console.error('获取行业数据失败:', err)
      })
      this.getResumeList()
    },
    // 获取简历列表
    getResumeList() {
      resumeQuery().then(res => {
        if (res && res.data && Array.isArray(res.data)) {
          this.resumeList = res.data
          this.resumeOptions = res.data.map(item => ({
            text: item.name || item.fileName || '简历',
            value: item.id.toString()
          }))
          
          // 自动选中第一个简历
          if (this.resumeOptions.length > 0) {
            this.resume = this.resumeOptions[0].value
          }
        }
      }).catch(err => {
        console.log('获取简历列表失败:', err)
      })
    },
    async afterResumeRead(event) {
      if (!event.file || event.file.length === 0) {
        uni.showToast({
          title: '未获取到文件',
          icon: 'error'
        })
        return
      }
      
      const fileObj = event.file[0]
      
      uni.showLoading({
        title: '上传中...',
        mask: true
      })
      
      try {
        let fileToUpload
        
        if (fileObj.file) {
          fileToUpload = fileObj.file
        } else if (fileObj.url) {
          const response = await uni.request({
            url: fileObj.url,
            method: 'GET',
            responseType: 'arraybuffer'
          })
          const arrayBuffer = response.data
          
          const blob = new Blob([arrayBuffer], { type: fileObj.type || 'application/octet-stream' })
          fileToUpload = new File([blob], fileObj.name || 'resume', { 
            type: fileObj.type || 'application/octet-stream' 
          })
          
        } else if (fileObj.path) {
          fileToUpload = fileObj.path
        } else {
          throw new Error('无法识别的文件对象结构')
        }
        
        if (!fileToUpload) {
          throw new Error('文件对象为空')
        }
        
        const formData = new FormData()
        formData.append('file', fileToUpload)
        
        const res = await resumeUpload(formData)
        
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        })
        
        this.getResumeList()
        
      } catch (err) {
        uni.showToast({
          title: err.message || '上传失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
        this.resumeFileList = []
      }
    },
    deleteResume(event) {
      this.resumeFileList = this.resumeFileList.filter(
        (file) => file.id !== event.detail.file.id
      )
    },
    selectResume(val) {
      this.resume = val
      uni.$emit('uv-drop-down-close', { sign: 'resume' })
    },
    deleteResumeItem(item) {
      console.log(item)
      uni.showModal({
        title: '提示',
        content: '确定要删除此简历吗？',
        success: (res) => {
          if (res.confirm) {
            resumeDelete(item.id).then(res => {
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              // 如果删除的是当前选中的简历，清空选择
              if (this.resume === item.id.toString()) {
                this.resume = ''
              }
              this.getResumeList()
            }).catch(err => {
              uni.showToast({
                title: err.message || '删除失败',
                icon: 'error'
              })
            })
          }
        }
      })
    }
  },
  mounted(){
   
   this.getData()
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';
.interview-page {
  background: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.banner {
  position: relative;
  width: 100%;
  height: 400rpx;
  .back-icon {
    position: absolute;
    left: 20rpx;
    top: 20rpx;
    z-index: 2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(172, 168, 168, 0.5);
    border-radius: 50%;
    width: 60rpx;
    height: 60rpx;
  }
}
.banner-img {
  width: 100%;
  height: 100%;
}
.banner-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner-title {
  margin-top: 180rpx;
  font-size: 52rpx;
  font-weight: bold;
}
.banner-slogan {
  font-size: 28rpx;
  margin-top: 30rpx;
}
.filter-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 32rpx 0 52rpx 0;
  width: 92%;
  box-sizing: border-box;
}

.filter-row {
  display: flex;
  gap: 24rpx;
}

.filter-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  ::v-deep .uv-drop-down {
    border: 1px solid #dadbde !important;
    border-radius: 16rpx !important;
  }
}

.filter-label {
  font-size: 28rpx;
  color: #444;
  font-weight: 500;
  margin-bottom: 16rpx;
}
.global-filters {
  margin: 24rpx 0;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx;
}
.interview-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  width: 92%;
  box-sizing: border-box;
}

.interview-title {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
    margin-left: 12rpx;
    margin-right: 16rpx;
  }
  .title-desc {
    font-size: 22rpx;
    color: #888;
    flex: 1;
  }
}

.form-group {
  margin-bottom: 24rpx;
}

.form-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  font-size: 26rpx;
  background: #fafbfc;
  margin-bottom: 0;
  box-sizing: border-box;
}
.form-input {
  height: 80rpx;
}
.form-textarea {
  min-height: 80rpx;
  resize: none;
}

.pill-group {
  display: flex;
  gap: 18rpx;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.pill {
  padding: 12rpx 28rpx;
  border-radius: 32rpx;
  background: #f3f7f6;
  color: #606266;
  font-size: 26rpx;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.pill.active {
  background: #e6f7f6;
  color: #4ecdc4;
  border-color: #4ecdc4;
}
.mock-section {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin-bottom: 32rpx;
  width: 92%;
  box-sizing: border-box;
}
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}
.mock-icon {
  margin-right: 14rpx;
}
.mock-title {
  font-size: 30rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 2rpx;
}
.mock-desc {
  font-size: 22rpx;
  color: #888;
  display: block;
}
.form-group {
  margin-bottom: 30rpx;
}
.form-label {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
.input-row {
  display: flex;
  align-items: flex-end;
  gap: 12rpx;
}
.desc-input {
  flex: 1;
  border-radius: 16rpx !important;
  background: #fff !important;
  min-height: 110rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #e0e0e0 !important;
  font-size: 22rpx;
  color: #222;
}
.voice-btn {
  margin-left: 8rpx;
  min-width: 60rpx;
  height: 60rpx;
  padding: 0;
  background: $uni-default-color !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.ai-btn {
  width: 100%;
  margin-top: 16rpx;
  background: #fff !important;
  color: $uni-default-color !important;
  border: 2rpx solid $uni-default-color !important;
  font-size: 26rpx;
  border-radius: 32rpx;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.radio-btn-group {
  display: flex;
  gap: 18rpx;
  margin-top: 8rpx;
}
.radio-btn {
  padding: 10rpx 32rpx;
  border-radius: 32rpx;
  background: #fff;
  color: #888;
  font-size: 22rpx;
  border: 2rpx solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.radio-btn.active {
  background: #fff;
  color: $uni-default-color;
  border: 2rpx solid $uni-default-color;
}
.resume-select {
  width: 100%;
  margin-bottom: 16rpx;
}

.resume-btn {
  width: 100%;
  margin-bottom: 10rpx;
  background: #f8fafd !important;
  color: #3ad6b6 !important;
  border: none !important;
  font-size: 26rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-tip {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #888;
  margin-bottom: 10rpx;
}

.mode-btn-group {
  display: flex;
  gap: 24rpx;
  margin-top: 18rpx;
}

.mode-btn {
  flex: 1;
  font-size: 28rpx;
  border-radius: 10rpx;
  height: 80rpx;
}
.qa-section {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin-bottom: 32rpx;
}
.qa-header {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}
.qa-icon {
  margin-right: 12rpx;
}
.qa-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 12rpx;
}
.qa-more {
  margin-left: auto;
  color: $uni-default-color;
  font-size: 22rpx;
  display: flex;
  align-items: center;
}
.qa-filters {
  display: flex;
  gap: 16rpx;
  margin-bottom: 18rpx;
}
.qa-filter-btn {
  background: #fff;
  color: $uni-default-color;
  border-radius: 18rpx;
  font-size: 20rpx;
  padding: 8rpx 22rpx;
  border: 2rpx solid $uni-default-color;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.qa-list {
  margin-top: 8rpx;
}
.qa-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 18rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: 2rpx solid $uni-default-color;
  position: relative;
}
.qa-q-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  position: relative;
}
.qa-q-line {
  position: absolute;
  left: 0;
  top: 8rpx;
  bottom: 8rpx;
  width: 6rpx;
  border-radius: 6rpx;
  background: $uni-default-color;
  content: '';
}
.qa-q {
  font-size: 22rpx;
  font-weight: bold;
  color: #222;
  margin-left: 32rpx;
}
.qa-tags {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}
.qa-tag {
  background: #eafaf3;
  color: $uni-default-color;
  border-radius: 12rpx;
  font-size: 18rpx;
  padding: 4rpx 14rpx;
  margin-top: 4rpx;
}
.qa-tag-blue {
  background: #e6f0ff;
  color: #3b82f6;
}
.qa-tag-red {
  background: #ffeaea;
  color: #ff5a5f;
}
.qa-tag-gray {
  background: #f3f3f3;
  color: #888;
}
.qa-btn {
  width: 100%;
  margin-top: 18rpx;
  font-size: 26rpx;
  border-radius: 32rpx;
  font-weight: 500;
}
.history-section {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin-bottom: 32rpx;
}
.history-header {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}
.history-icon {
  margin-right: 12rpx;
}
.history-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 12rpx;
}
.history-more {
  margin-left: auto;
  color: $uni-default-color;
  font-size: 22rpx;
  display: flex;
  align-items: center;
}
.history-list {
  margin-bottom: 18rpx;
}
.history-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 18rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: 2rpx solid $uni-default-color;
  position: relative;
}
.history-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.history-time {
  font-size: 20rpx;
  color: #888;
  margin-right: 12rpx;
}
.history-content {
  margin-bottom: 10rpx;
}
.history-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 4rpx;
}
.history-tags {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}
.history-tag {
  font-size: 22rpx;
  background: #e6f7f6;
  color: #4ecdc4;
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
  width: auto;
  white-space: nowrap;
}
.history-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10rpx;
}
.history-score {
  font-size: 20rpx;
  font-weight: bold;
  color: $uni-default-color;
}
.history-more-btn {
  width: 100%;
  font-size: 26rpx;
  border-radius: 32rpx;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: none !important;
}
::v-deep .uv-button--primary {
  background: $uni-default-color !important;
  border: none !important;
}
.popup-options {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.popup-option {
  padding: 18rpx 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
}
.popup-option:last-child {
  border-bottom: none;
}
.popup-option.active {
  color: #3ad6b6;
  font-weight: bold;
}

/* 我的简历弹窗样式 */
.resume-popup-container {
  padding: 24rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.resume-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  margin-bottom: 16rpx;
}

.resume-popup-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.resume-upload-section {
  text-align: center;
  padding: 16rpx 0 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .upload-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
  }
  .upload-info {
    font-size: 20rpx;
    color: #999;
  }
}

.resume-list {
  margin-top: 24rpx;
  max-height: 50vh; // 限制最大高度，超出可滚动
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.resume-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f8fa;
  border-radius: 16rpx;
  padding: 24rpx;
}

.resume-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.resume-name {
  font-size:24rpx;
  font-weight: 500;
  color: #333;
}

.resume-meta {
  font-size:22rpx;
  color: #999;
}

.resume-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.action-icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  background-color: #ebeef5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 文件预览弹窗样式 */
.preview-popup-container {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.preview-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.preview-popup-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.preview-content-wrapper {
  flex: 1;
  display: flex;
  height: 100%;
}

.preview-content {
  flex: 1;
  width: 50%;
  height: 100%;
  border-right: 1px solid #f0f0f0;
}

.preview-content web-view {
  width: 100%;
  height: 100%;
}

/* 简历分析结果样式 */
.resume-analysis-section {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.analysis-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 24rpx;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.analysis-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.analysis-scroll {
  flex: 1;
  height: 100%;
  padding: 0 24rpx;
}

.analysis-section {
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-top: 16rpx;
}

.section-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #4ECDC4;
  display: block;
  margin-bottom: 16rpx;
  padding-bottom: 8rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.info-label {
  font-size: 20rpx;
  color: #666;
  min-width: 80rpx;
  font-weight: 500;
}

.info-value {
  font-size: 20rpx;
  color: #333;
  flex: 1;
}

.experience-list, .project-list, .education-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.experience-item, .project-item, .education-item {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 12rpx;
  border-left: 3rpx solid #4ECDC4;
}

.experience-header, .project-header, .education-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rpx;
}

.company-name, .project-name, .school-name {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
}

.work-time, .project-time, .edu-time {
  font-size: 18rpx;
  color: #999;
}

.position-name {
  font-size: 18rpx;
  color: #666;
}

.project-description {
  font-size: 18rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.responsibilities {
  margin-top: 8rpx;
}

.responsibilities-title {
  font-size: 18rpx;
  font-weight: bold;
  color: #666;
  margin-bottom: 6rpx;
  display: block;
}

.responsibility-item {
  margin-bottom: 4rpx;
}

.responsibility-text {
  font-size: 18rpx;
  color: #666;
  line-height: 1.4;
}

.degree-info {
  font-size: 18rpx;
  color: #666;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.tech-tag {
  background: #e6f7f6;
  color: #4ECDC4;
  font-size: 18rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

</style>
